<template>
    <div>

    </div>
</template>

<script>
// 接口返回的格式：
// pid:所属父分类id
const cates = [
    { cat_id: 1, cate_name: '体育', pid: 0 },
    { cat_id: 2, cate_name: '娱乐', pid: 0 },
    { cat_id: 3, cate_name: '篮球', pid: 1 },
    { cat_id: 4, cate_name: '足球', pid: 1 },
    { cat_id: 5, cate_name: 'NBA', pid: 3 },
    { cat_id: 6, cate_name: 'CBA', pid: 3 },
]

// 封装树形函数
function buildTree(cates) {
    // 1.创建一个map字典，分类cat_id作为k,每项作为v,v中加一个children:[]
    const map = {}
    cates.forEach((cate) => {
        map[cate.cat_id] = { ...cate, children: [] }
    })
    // 2. 创建一个数组,存储根节点（pid=0）
    const tree = []
    cates.forEach((cate) => {
        if (cate.pid === 0) {
            // 顶级分类
            tree.push(map[cate.cat_id])
        } else {
            // 非顶级  体育cat_id = 1,    足球 pid = 1
            map[cate.pid].children.push(map[cate.cat_id])
        }
    })

    return tree
}

const treeData = buildTree(cates)
console.log(treeData)
</script>


<style lang="scss" scoped></style>